import React, { useState } from 'react';
import { Avatar, Dropdown, Button, Modal, Descriptions, Tag } from 'antd';
import { 
  UserOutlined, 
  LogoutOutlined, 
  SettingOutlined,
  InfoCircleOutlined
} from '@ant-design/icons';
import { useAuth } from '../contexts/AuthContext';
import type { MenuProps } from 'antd';

const UserProfile: React.FC = () => {
  const { user, logout } = useAuth();
  const [showProfile, setShowProfile] = useState(false);

  if (!user) return null;

  const handleLogout = () => {
    Modal.confirm({
      title: '确认退出',
      content: '您确定要退出登录吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: logout,
    });
  };

  const menuItems: MenuProps['items'] = [
    {
      key: 'profile',
      label: '个人信息',
      icon: <InfoCircleOutlined />,
      onClick: () => setShowProfile(true),
    },
    {
      key: 'settings',
      label: '设置',
      icon: <SettingOutlined />,
      disabled: true,
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: handleLogout,
    },
  ];

  const getGenderText = (gender: string) => {
    switch (gender) {
      case 'male': return '男';
      case 'female': return '女';
      case 'other': return '其他';
      default: return gender;
    }
  };

  const getGenderColor = (gender: string) => {
    switch (gender) {
      case 'male': return 'blue';
      case 'female': return 'pink';
      case 'other': return 'purple';
      default: return 'default';
    }
  };

  return (
    <>
      <Dropdown menu={{ items: menuItems }} placement="bottomRight" arrow>
        <button className="w-10 h-10 rounded-lg flex items-center justify-center text-white/70 hover:bg-white/20 hover:text-white transition-colors">
          <Avatar 
            size={24} 
            src={user.avatar} 
            icon={<UserOutlined />}
          />
        </button>
      </Dropdown>

      <Modal
        title="个人信息"
        open={showProfile}
        onCancel={() => setShowProfile(false)}
        footer={[
          <Button key="close" onClick={() => setShowProfile(false)}>
            关闭
          </Button>
        ]}
        width={500}
      >
        <div className="text-center mb-6">
          <Avatar 
            size={80} 
            src={user.avatar} 
            icon={<UserOutlined />}
            className="mb-4"
          />
          <h3 className="text-lg font-semibold">{user.name}</h3>
          <p className="text-gray-500">@{user.username}</p>
        </div>

        <Descriptions column={1} bordered>
          <Descriptions.Item label="账号">
            {user.username}
          </Descriptions.Item>
          <Descriptions.Item label="姓名">
            {user.name}
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            <Tag color={getGenderColor(user.gender)}>
              {getGenderText(user.gender)}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="手机号">
            {user.phone}
          </Descriptions.Item>
          <Descriptions.Item label="邮箱">
            {user.email}
          </Descriptions.Item>
          <Descriptions.Item label="注册时间">
            {new Date(user.createdAt).toLocaleString('zh-CN')}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
    </>
  );
};

export default UserProfile;